<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gravity Brain</title>

  <!-- 离线 Google 字体: Source Sans Pro -->
  <link rel="stylesheet" href="../static/css/google.css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome 图标 -->
  <link rel="stylesheet" href="../static/plugins/fontawesome-free/css/all.min.css">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="../static/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- 主题样式 -->
  <link rel="stylesheet" href="../static/css/adminlte.min.css">
{#  <script type="text/javascript">#}
{#        // 定义一个函数来刷新页面#}
{#        function autoRefreshPage() {#}
{#            window.location.reload();#}
{#        }#}
{##}
{#        // 设置定时器，每隔3000毫秒（即3秒）调用一次autoRefreshPage函数#}
{#        setTimeout(autoRefreshPage, 20000);#}
{#  </script>#}
</head>
<body class="hold-transition dark-mode sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
<div class="wrapper">

  <!-- Preloader -->
  <!--<div class="preloader flex-column justify-content-center align-items-center">
    <img class="animation__wobble" src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
  </div>-->

  <!-- 导航栏 -->
  <nav class="main-header navbar navbar-expand navbar-dark">
    <!-- 左侧导航栏链接 -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="index3.html" class="nav-link">主页</a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- 主侧边栏容器 -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- 品牌 Logo -->
    <a  class="brand-link">
      <img src="../static/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
      <span class="brand-text font-weight-light">重力波大脑</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- 侧边栏菜单 -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- 使用 .nav-icon 类添加图标，
               或使用 font-awesome 或其他任何图标字体库 -->
          <li class="nav-item menu-open">
            <a href="index.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                首页
              </p>
            </a>
          </li>

          <li class="nav-item menu-open">
            <a href="index2.html" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                重力波图像分析
              </p>
            </a>
          </li>

          <li class="nav-item menu-open">
            <a href="#" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                交互
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="detect.html" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>图像受气象干扰影响</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="anoinv.html" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>重力波反演温度推算</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="generation.html" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>重力波图像生成</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. 包含页面内容 -->
  <div class="content-wrapper">
    <!-- 内容标题（页面标题） -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">Gravity Brain</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">首页</a></li>
              <li class="breadcrumb-item active">Gravity Brain</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <!-- /.content-header -->

    <!-- 主体内容 -->
    <section class="content">
      <div class="container-fluid">
        <!-- Info boxes -->
        <div class="row">
          <div class="col-12 col-sm-6 col-md-4">
            <div class="info-box">
              <span class="info-box-icon bg-info elevation-1"><i class="fas fa-cog"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">系统环境相对湿度</span>
                <span class="info-box-number">
                  【1】11.3<div style="display:inline" id="humidity1"></div>
                  <small>%</small>
                  【2】11.5<div style="display:inline" id="humidity2"></div>
                  <small>%</small>
                  【3】11.1<div style="display:inline" id="humidity3"></div>
                  <small>%</small>
                </span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->
          <div class="col-12 col-sm-6 col-md-4">
            <div class="info-box mb-3">
              <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-cog"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">系统环境温度</span>
                <span class="info-box-number">
                  【1】23.1<div style="display:inline" id="temperature1"></div>
                  <small>℃</small>
                  【2】23.2<div style="display:inline" id="temperature2"></div>
                  <small>℃</small>
                  【3】23.0<div style="display:inline" id="temperature3"></div>
                  <small>℃</small>
                </span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->

          <!-- fix for small devices only -->
          <div class="clearfix hidden-md-up"></div>

          <div class="col-12 col-sm-6 col-md-4">
            <div class="info-box mb-3">
              <span class="info-box-icon bg-success elevation-1"><i class="fas fa-cog"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">噪声</span>
                <span class="info-box-number">
                  【1】42<div style="display:inline" id="noise1"></div>
                  <small>dB</small>
                  【2】41<div style="display:inline" id="noise2"></div>
                  <small>dB</small>
                  【3】44<div style="display:inline" id="noise3"></div>
                  <small>dB</small>
                </span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->
        </div>

        <!-- 气象数据块 -->
        <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">气象数据表</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <table id="example2" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>时间</th>
                  <th>外界温度</th>
                  <th>外界湿度</th>
                  <th>外界气压</th>
                  <th>地表温度</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td id="text-timetamp"></td>
                  <td id="temperature"></td>
                  <td id="humidity"></td>
                  <td id="air_pressure"></td>
                  <td id="ts"></td>
                </tr>
                <thead>
                <tr>
                  <th>风速</th>
                  <th>风向</th>
                  <th>能见度</th>
                  <th>降水量</th>
                  <th>雪深</th>
                </tr>
                </thead>
                <tr>
                  <td id="wind_speed"></td>
                  <td id="wind_direction"></td>
                  <td id="visibility"></td>
                  <td id="precipitation"></td>
                  <td id="sd"></td>
                </tr>
                <thead>
                <tr>
                  <th>太阳辐射下行</th>
                  <th>太阳辐射上行</th>
                  <th>长波辐射上行</th>
                  <th>长波辐射下行</th>
                  <th>电池电压</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td id="swd"></td>
                  <td id="swu"></td>
                  <td id="lwd"></td>
                  <td id="lwu"></td>
                  <td id="bv"></td>
                </tr>
              </table>
            </div>
            <!-- /.card-body -->
          </div>
      <!-- /.col -->
        </div>
      </div>

        <!-- 反演温度对比曲线块 -->
        <div class="row">
          <div class="col-md-2">
            <div class="card card-outline">
              <div class="card-header">
                <h3 class="card-title">
                  重力波图像
                </h3>
              </div>
              <div class="card-body">
                <img class="col-md-12" id="newest-spectrogram-img">
              </div>
            </div>
          </div>
          <div class="col-md-10">
            <div class="card card-outline">
              <div class="card-header">
                <h3 class="card-title">
                  <i class="far fa-chart-bar"></i>
                  反演温度折线图
                </h3>
              </div>
              <div class="card-body">
                    <div id="line-Chart" style="height: 300px; background-color: white"></div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>
  </div>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- 控制侧边栏内容在这里 -->
  </aside>
  <!-- /.control-sidebar -->

  <!-- Main Footer -->
  <!--<footer class="main-footer">
    <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong>
    保留所有权利。
    <div class="float-right d-none d-sm-inline-block">
      <b>版本</b> 3.2.0
    </div>
  </footer>-->
</div>
<!-- ./wrapper -->

<!-- 载入脚本 -->
<!-- jQuery -->
<script src="../static/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- overlayScrollbars -->
<script src="../static/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="../static/js/adminlte.js"></script>

<!-- PAGE PLUGINS -->
<!-- jQuery Mapael -->
<script src="../static/plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="../static/plugins/raphael/raphael.min.js"></script>
<script src="../static/plugins/jquery-mapael/jquery.mapael.min.js"></script>
<script src="../static/plugins/jquery-mapael/maps/usa_states.min.js"></script>
<!-- ChartJS -->
<script src="../static/plugins/chart.js/Chart.min.js"></script>

<!-- 用于演示 AdminLTE  -->
<script src="../static/js/demo.js"></script>
<!-- AdminLTE 仪表盘演示（仅用于演示） -->
{#<script src="../static/js/pages/dashboard2.js"></script>#}


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<!-- AdminLTE App -->
<script src="../static/js/adminlte.min.js"></script>
<!-- FLOT CHARTS -->
<script src="../static/plugins/flot/jquery.flot.js"></script>
<!-- FLOT RESIZE 插件 - 允许在调整窗口大小时重新绘制图表 -->
<script src="../static/plugins/flot/plugins/jquery.flot.resize.js"></script>
<!-- FLOT PIE 插件 - 也用于绘制环形图 -->
<script src="../static/plugins/flot/plugins/jquery.flot.pie.js"></script>
<!-- uPlot -->
<script src="../static/plugins/uplot/uPlot.iife.min.js"></script>

<script src="../static/plugins/echart/echart.js"></script>

<script>
    // 数据传输
    let timetamp_list = []
    let detect_image_list = []
    let detect_label_list = []
    let detect_score_list = []
    let spectrogram8_list = []
    let anoinv_score_list = []
    let inversion_score_list = []
    let generation_image_list = []
    let generation_BG_image_list = []
    let sum_image_list = []
    let report_list = []


    function loadData()
    {
        $.ajax({
        type: "post",
        async: false,
        url: "/api/data",
        success: function (data) {
            for (let i = 0; i < data.length; i++) {
                let map = new Map(Object.entries(data[i]));
                console.log(map)
                let time = new Date(Date.parse(map.get("timetamp")))
                {#timetamp_list.push(formatDateTime(time))#}
                timetamp_list.push(map.get("timetamp"))
                detect_image_list.push(map.get("detect_image"))
                detect_label_list.push(map.get("detect_label"))
                detect_score_list.push(map.get("detect_score"))
                spectrogram8_list.push(map.get("spectrogram8"))

                anoinv_score_list.push(map.get("anoinv_score"))
                inversion_score_list.push(map.get("inversion_score"))
                generation_image_list.push(map.get("generation_image"))
                generation_BG_image_list.push(map.get("generation_BG_image"))
                sum_image_list.push(map.get("sum_image"))
                report_list.push(map.get("report"))
                console.log(detect_score_list[3])
            }

            document.getElementById("newest-spectrogram-img").src = `${spectrogram8_list[0]}`;
            console.log(generation_BG_image_list[0])
        }
        })

        $.ajax({
        type: "post",
        async: false,
        url: "/api/new_data",
        success: function (data) {
            let map = new Map(Object.entries(data[0]));
            console.log(map)
            document.getElementById("text-timetamp").innerText = map.get("timetamp")
            document.getElementById("temperature").innerText = map.get("temperature")
            document.getElementById("humidity").innerText = map.get("humidity")
            document.getElementById("air_pressure").innerText = map.get("air_pressure")
            document.getElementById("ts").innerText = map.get("ts")
            document.getElementById("wind_speed").innerText = map.get("wind_speed")
            document.getElementById("wind_direction").innerText = map.get("wind_direction")
            document.getElementById("visibility").innerText = map.get("visibility")
            document.getElementById("precipitation").innerText = map.get("precipitation")
            document.getElementById("sd").innerText = map.get("sd")
            document.getElementById("swd").innerText = map.get("swd")
            document.getElementById("swu").innerText = map.get("swu")
            document.getElementById("lwd").innerText = map.get("lwd")
            document.getElementById("lwu").innerText = map.get("lwu")
            document.getElementById("bv").innerText = map.get("bv")
        }
        })


    }
    $(function () {
        loadData()
    })


    $(function () {
        document.getElementById("timetamp0").innerText = `${timetamp_list[0]}`
        document.getElementById("timetamp1").innerText = `${timetamp_list[1]}`
        document.getElementById("timetamp2").innerText = `${timetamp_list[2]}`
        document.getElementById("timetamp3").innerText = `${timetamp_list[3]}`
        document.getElementById("timetamp4").innerText = `${timetamp_list[4]}`
        document.getElementById("timetamp5").innerText = `${timetamp_list[5]}`
        document.getElementById("timetamp6").innerText = `${timetamp_list[6]}`
        document.getElementById("report0").innerText = `${report_list[0]}`
        document.getElementById("report1").innerText = `${report_list[1]}`
        document.getElementById("report2").innerText = `${report_list[2]}`
        document.getElementById("report3").innerText = `${report_list[3]}`
        document.getElementById("report4").innerText = `${report_list[4]}`
        document.getElementById("report5").innerText = `${report_list[5]}`
        document.getElementById("report6").innerText = `${report_list[6]}`
    })


    $(function () {
        var chartDom = document.getElementById('line-Chart');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
        xAxis: {
            type: 'category',
            data: [timetamp_list[7], timetamp_list[6], timetamp_list[5], timetamp_list[4], timetamp_list[3], timetamp_list[2], timetamp_list[1], timetamp_list[0]]
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: [anoinv_score_list[7], anoinv_score_list[6], anoinv_score_list[5], anoinv_score_list[4], anoinv_score_list[3], anoinv_score_list[2], anoinv_score_list[1], anoinv_score_list[0]],
            type: 'line',
            smooth: false
            },
            {
            data: [inversion_score_list[7], inversion_score_list[6], inversion_score_list[5], inversion_score_list[4], inversion_score_list[3], inversion_score_list[2], inversion_score_list[1], inversion_score_list[0]],
            type: 'line',
            smooth: false
            }
        ]
        };

        option && myChart.setOption(option);

        $('<div class="tooltip-inner" id="line-chart-tooltip"></div>').css({
          position: 'absolute',
          display: 'none',
          opacity: 0.8
        }).appendTo('body')
        $('#line-chart').bind('plothover', function (event, pos, item) {

          if (item) {
            var x = item.datapoint[0].toFixed(2),
              y = item.datapoint[1].toFixed(2)

            $('#line-chart-tooltip').html(item.series.label + ' of ' + x + ' = ' + y)
              .css({
                top: item.pageY + 5,
                left: item.pageX + 5
              })
              .fadeIn(200)
          } else {
            $('#line-chart-tooltip').hide()
          }
        })
    })


    $(function () {
        {#console.log(detect_score_list[0])#}
        // 受干扰影响曲线图
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [timetamp_list[7], timetamp_list[6], timetamp_list[5], timetamp_list[4], timetamp_list[3], timetamp_list[2], timetamp_list[1], timetamp_list[0]],
                {#labels: [timetamp_list[3], timetamp_list[2], timetamp_list[1], timetamp_list[0]],#}
                datasets: [{
                    label: '受干扰影响指数',
                    {#data: [detect_score_list[3], detect_score_list[2], detect_score_list[1], detect_score_list[0]],#}
                    data: [detect_score_list[7], detect_score_list[6], detect_score_list[5], detect_score_list[4], detect_score_list[3], detect_score_list[2], detect_score_list[1], detect_score_list[0]],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        })
        $('<div class="tooltip-inner" id="line-chart-tooltip"></div>').css({
            position: 'absolute',
            display: 'none',
            opacity: 0.8
        }).appendTo('body')
        $('#line-chart').bind('plothover', function (event, pos, item) {

            if (item) {
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2)

                $('#line-chart-tooltip').html(item.series.label + ' of ' + x + ' = ' + y)
                    .css({
                        top: item.pageY + 5,
                        left: item.pageX + 5
                    })
                    .fadeIn(200)
            } else {
                $('#line-chart-tooltip').hide()
            }
        })
    })

</script>
</body>
</html>
